.index {
  width: 100vw;
  height: 100vh;

  .title {
    text-align: center;
    line-height: 2rem;
  }

  map {
    width: 100%;
    height: 500rpx;
  }

  .centers {
    position: fixed;
    left: 50%;
    top: 250rpx;
    transform: translateX(-50%) translateY(-50%);

    image {
      width: 50rpx;
      height: 50rpx;
    }
  }

  .position {
    width: 70rpx;
    height: 70rpx;
    position: fixed;
    left: 93%;
    top: 430rpx;
    transform: translateX(-50%) translateY(-50%);
    background: #f6f6f6;
    border: 1rpx solid #999;

    image {
      width: 50rpx;
      height: 50rpx;
      margin: 10rpx;
    }
  }

  .scale {
    width: 70rpx;
    height: 140rpx;
    position: fixed;
    left: 93%;
    top: 300rpx;
    transform: translateX(-50%) translateY(-50%);
    background: #f6f6f6;

    .add {
      width: 70rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      border: 1rpx solid #999;
      font-size: 50rpx;
      color: #1afa29;
      background: #f6f6f6;
    }

    .minus {
      width: 70rpx;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      border: 1rpx solid #999;
      font-size: 50rpx;
      color: #1afa29;
      background: #f6f6f6;
    }
  }

  .function {
    text-align: center;
    margin: 20rpx 0;
    position: relative;

    button {
      background: #1afa29;
      color: #ffffff;
    }

    .search {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }

    .refresh {
      position: absolute;
      left: 30rpx;
      top: 50%;
      transform: translateY(-50%);

      image {
        width: 50rpx;
        height: 50rpx;
      }
    }
  }

  .markerList {
    width: 100%;
    height: calc(100% - 620rpx);

    .scroll-view_H {
      width: 100%;
      height: 100%;
    }

    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1rpx solid #999;
      margin-bottom: 10rpx;
      align-items: center;

      .left {
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }

      .center {
        text-align: center;

        .name {
          // display: flex;
          // align-items: flex-end;
          font-size: 1rem;

          .ctime {
            font-size: .8rem;
            color: #999;
          }
        }

        .note {
          font-size: 0.8rem;
          color: #999999;
        }
      }

      .right {
        image {
          width: 100rpx;
          height: 100rpx;
        }
      }
    }

    .title {
      padding: 30rpx 0;
    }
  }

  .refreshing {
    animation: .6s rotate infinite;
  }

  @keyframes rotate {
    0% {
      transform: rotate(360deg);
    }

    100% {
      transform: rotate(0deg);
    }
  }
}